<template>
  <div class="phone-container">
    <!-- 手机号验证表单 找回密码 -->
    <div class="phone-form">
      <van-form ref="PhoneRef">
        <van-cell-group inset>
          <van-field
            v-model="phoneForm.phone"
            name="phone"
            label="手机号码"
            placeholder="请输入手机号码"
            :rules="phoneFormRules.phone"
            autocomplete="off"
          />
          <van-field
            v-model="phoneForm.code"
            center
            clearable
            label="短信验证码"
            placeholder="验证码"
          >
            <template #button>
              <van-button size="small" type="primary" @click="getPhoneCode">发送验证码</van-button>
            </template>
          </van-field>
        </van-cell-group>
        <!-- 提交按钮 -->
        <div class="login-btns">
          <van-button round block type="primary" native-type="submit" @click="onPhoneConfirm">
            确认
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { showToast } from 'vant'
import { getPhoneCode, onPhonePwd } from '../../api/user.js'
export default {
  data() {
    return {
      // 手机登录表单
      phoneForm: {
        phone: '',
        code: ''
      },
      // 手机登录表单的验证规则
      phoneFormRules: {
        phone: [
          { required: true, message: '请填写手机号码', trigger: 'blur' },
          { pattern: /^1[3456789]\d{9}$/, message: '手机号码格式错误！', trigger: 'blur' }
        ],
        code: [{ required: true, message: '请填写验证码', trigger: 'blur' }]
      },
      // 发送过来的手机验证码
      phoneCode: ''
    }
  },
  methods: {
    // 发送手机验证码
    async getPhoneCode() {
      if (this.phoneForm.phone) {
        const phoneMsg = { phone: this.phoneForm.phone }
        const { data: res } = await getPhoneCode(phoneMsg)
        if (res !== '发送成功') {
          return showToast('验证码获取失败')
        }
      } else {
        return showToast('请先输入手机号码')
      }
    },
    // 找回密码
    onPhoneConfirm() {
      this.$refs.PhoneRef.validata()
        .then(async () => {
          const { data: res } = await onPhonePwd(this.phoneForm.phone)
          if (res.code === 1) {
            this.$router.push({ name: 'resetpwd', params: { phone: this.phoneForm.phone } })
          } else {
            return showToast('手机号码或验证码有误')
          }
        })
        .catch(() => {
          // 表单验证失败
          showToast('表单填写有误！')
        })
    }
  }
}
</script>

<style lang="less" scoped>
.phone-container {
  position: relative;
  height: 100vh;
  background-color: #f3f3f3;
  // 手机号码登录表单
  .phone-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background-color: #fff;

    .van-form {
      margin-top: 40px;
      .van-cell-group {
        margin: 0 20px;

        .van-field {
          align-items: center;
          height: 58px;
          margin: 10px 0;
          border: 1px solid #a8ebab;
          border-radius: 3px;
          font-size: 18px;
        }
      }

      .login-btns {
        display: flex;
        justify-content: center;
        margin: 30px 0;

        .van-button {
          width: 40%;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
